<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 成绩列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection"
                    v-if="false">批量删除</el-button>
                <el-input v-model="query.name" placeholder="搜索考试名称" class="handle-input mr10" @input="addSearch"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch" v-if="false">搜索</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="exam_name" label="考试名称"></el-table-column>
                <el-table-column prop="exam_fullcredit" label="满分"></el-table-column>
                <el-table-column prop="exam_passline" label="及格线"></el-table-column>
                <el-table-column label="考试用时">
                    <template slot-scope="scope">
                        <span>{{ scope.row.score_exam_time2 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="score_val" label="得分"></el-table-column>
                <!-- <el-table-column prop="exam_count" label="考试次数"></el-table-column> -->
                <!-- <el-table-column prop="exame_high" label="最高分"></el-table-column> -->
                <el-table-column label="是否通过" align="center">
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.score_val >= scope.row.exam_passline ? 'success' : (scope.row.score_val < scope.row.exam_passline ? 'danger' : '')">{{ scope.row.score_val
                                >= scope.row.exam_passline ? '及格' : '不及格' }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="考试时长">
                    <template slot-scope="scope">
                        <span>{{ scope.row.exam_time2 }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="getScoreDetail(scope.$index, scope.row)">查看</el-button>
                        <el-button type="danger" plain class="white"
                            @click="delAllSelection(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div> -->
            <div style="margin-top:20px;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <!-- 反馈 -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

// 接口
import { scoreRemove, scoreList, scoreSearch, scoreTotal } from '../../api/index';

import moment from 'moment';

const downTime = (seconds) => {
    let h = Math.floor(seconds / 3600);
    let m = Math.floor((seconds % 3600) / 60);
    let s = Math.floor(seconds % 60);
    h = h < 10 ? '0' + h : h;
    m = m < 10 ? '0' + m : m;
    s = s < 10 ? '0' + s : s;
    return `${h}小时${m}分钟${s}秒`
}

export default {
    name: 'basetable',
    data() {
        return {
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,
            currentPage: 1,
            scoreRemoveArr:[]
        };
    },
    filters: {
        formattime(val) {
            return moment(val).format('hh:mm:ss')
        }
    },
    created() {
        this.getData();
    },
    methods: {
       
        // 获取我的成绩数据
        async getData(page_num = 1, page_size = 5) {
            await scoreList({ page_num, page_size }).then(content => {
                let { code, result, msg } = content;
                console.log(result)
                if (code == 200) {
                    let arr = [];
                    result.forEach(item => {
                        let o = item;
                        // console.log("xxx", item.exam_time * 60)
                        o.exam_time2 = downTime(item.exam_time * 60);
                        o.score_exam_time2 = downTime(item.score_exam_time);
                        arr.push(o);
                    })

                    this.tableData = arr;
                }
                else {
                    this.$message({
                        message: msg,
                        type: 'warning'
                    })
                }
            })

            await scoreTotal({}).then(content => {
                let { code, result, total } = content;
                console.log('xx:-', content)
                if (code == 200) {
                    this.pageTotal = total;
                }
            })
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => { });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.scoreRemoveArr = val;
        },

        // 搜索成绩
        async addSearch() {
            let keyword = this.query.name;
            if(keyword.length == 0){
                this.getData();
                return ;    
            }
            await scoreSearch({ keyword }).then(content => {
                // console.log('题库列表:', content)
                let { code, result } = content;
                if (code == 200) {
                    this.tableData = result;
                    this.pageTotal = result.length;
                }
            })
                .catch(
                    err => {
                        console.log(err)
                    }
                )

        },
        // 删除成绩
        async delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            // this.$message.error(`删除了${str}`);
            if (confirm('您确定删除该成绩吗?')) {
                // 执行删除
                for (let i = 0; i < this.scoreRemoveArr.length; i++) {
                    await scoreRemove({ score_id: this.scoreRemoveArr[i].score_id }).then(row => {
                        if (row.code == 200) {
                            console.log('删除:',row);
                            let arr = this.tableData.filter(item => {
                                if (item.score_id != this.scoreRemoveArr[i].score_id) {
                                    return item;
                                }
                            })
                            this.tableData = arr;
                        }
                    })
                }
            }

            this.multipleSelection = [];
        },
        // 编辑操作
        getScoreDetail(index, row) {
            this.idx = index;
            this.form = row;
            console.log("成绩信息:",row);
            let {score_id} = row;
            // this.editVisible = true;
            this.$router.push({
                path: '/answer',
                query:{
                    score_id
                }
            })
        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData(val);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getData(val);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getData(val);
        },
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
